import React from "react"
import { Carousel, WingBlank } from 'antd-mobile';
import { withRouter } from "react-router-dom"
import { observer, inject } from "mobx-react"
import { id } from "postcss-selector-parser";
@inject("PlaylistStore")
@observer
@withRouter
class Playlist extends React.Component {
    state = {
        data: [],
        imgHeight: 400,
    }
    componentDidMount() {
        // simulate img loading
        this.props.PlaylistStore.get_playlist()
        this.props.PlaylistStore.get_lists()
        setTimeout(() => {
            const arr1 = this.props.PlaylistStore.Playlist_store
            this.setState({
                data: arr1
            });
        }, 100);
    }
    back(props) {
        this.props.history.go(-1)
    }
    forward(id){
        // console.log(id)
        this.props.history.push(`Playlist/ListDetails?id=${id}`)
    }
    jump(props){

        this.props.history.push(`Playlist/ListDetails`)
    }
    jump2(id,e){
        e =  e.preventDefault()
        this.props.history.push(`/Discover/Playlist/ListDetails?id=${id}`)
    }
    render() {
        const arr2 = this.props.PlaylistStore.lists_store
        // console.log(arr2[0])
        // console.log(arr2[0].id)
        return (
            <fieldset>
                <div className="playlist">
                    <button className="playlist_btn" onClick={this.back.bind(this)}><svg t="1574037423591" className="playlist_icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="861" width="32" height="32"><path d="M766.862 1021.724c-10.24 0-20.594-3.64-28.444-10.922L228.693 538.396c-15.701-14.563-15.701-38.229 0-52.792L738.418 13.198c15.701-14.563 41.187-14.563 56.889 0 15.701 14.564 15.701 38.23 0 52.793L314.027 512l481.28 446.009c15.701 14.563 15.701 38.23 0 52.793-7.851 7.282-18.205 10.922-28.445 10.922z" p-id="862"></path></svg></button>
                    <h1>歌单广场</h1>
                    <button className="playlist_btn" onClick={this.jump.bind(this)}><svg t="1574037679352" className="playlist_icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1002" width="32" height="32"><path d="M257.138 2.276c10.24 0 20.594 3.64 28.444 10.922L795.307 485.604c15.70100001 14.563 15.701 38.229 0 52.792L285.582 1010.802c-15.70100001 14.563-41.187 14.563-56.889 0-15.701-14.564-15.70100001-38.23 0-52.793L709.973 512l-481.28-446.009c-15.70100001-14.563-15.70100001-38.23 0-52.793 7.851-7.282 18.205-10.922 28.445-10.922z" fill="#333333" p-id="1003"></path></svg></button>
                </div>
                <div className="playlist_container">
                    <WingBlank>
                        <Carousel className="space-carousel"
                            frameOverflow="hidden"
                            cellSpacing={5}
                            slideWidth="200px"
                            autoplay={true}
                            infinite={true}
                            beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
                            afterChange={index => this.setState({ slideIndex: index })}
                        >
                            {this.state.data.map((val, index) =>
                                <a
                                    key={val}
                                    href="#"
                                    style={{
                                        display: 'block',
                                        position: 'relative',
                                        top: this.state.slideIndex === index ? -10 : 0,
                                        height: this.state.imgHeight,
                                        boxShadow: '2px 1px 1px rgba(0, 0, 0, 0.2)',
                                    }}
                                >
                                    <img
                                        onClick={this.jump2.bind(this,val.id)}
                                        src={val.coverImgUrl}
                                        alt=""
                                        style={{ width: '100%', borderRadius: "5px", verticalAlign: 'top' }}
                                        onLoad={() => {
                                            // fire window resize event to change height
                                            window.dispatchEvent(new Event('resize'));
                                            this.setState({ imgHeight: '100%' });
                                        }}
                                    />
                                    <span>{val.name}</span>
                                </a>
                            )}
                        </Carousel>
                    </WingBlank>
                </div>
                <ul className="playlist_ul" >
                    {arr2.map((val, index) =>
                    <li key={index} onClick={this.forward.bind(this,val.id)}>
                        <img src={val.coverImgUrl}
                        className="playlist_pic"
                        />
                    <span className="playlist_pic1">{val.name}</span>
                    </li>)}
                </ul>
            </fieldset>
        )
    }
}
export default Playlist